<template>
  <div id="container">
    <el-row>
      <el-col :span="20">
        <el-descriptions class="margin-top" title="收入详情" :column="3" :size="size" border>
          <template slot="extra">
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-info"></i>
              流水号
            </template>
            {{ currentIncomeInfo.incomeId }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-date"></i>
              收入日期
            </template>
            {{ currentIncomeInfo.incomeTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-money"></i>
              收入金额
            </template>
            {{ currentIncomeInfo.incomeNum }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-data-line"></i>
              支出分类
            </template>
            {{ currentIncomeInfo.incomeSort }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户编号
            </template>
            {{ currentIncomeInfo.incomeUserId }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-bank-card"></i>
              姓名
            </template>
            {{ currentIncomeInfo.incomeUser }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-edit-outline"></i>
              备注
            </template>
            {{ currentIncomeInfo.incomeRemark }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-picture-outline"></i>
              凭证
            </template>
            <el-button type="default" v-show="currentIncomeInfo.voucherUrl" size="mini" @click="showVoucherImage(currentExpenseInfo.voucherUrl)">点击查看</el-button>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "details",
  data(){
    return{
      currentIncomeInfo:{

      }
    }
  },
  mounted() {
    this.initCurrentIncomeInfo();
  },
  methods:{
    initCurrentIncomeInfo(){
      this.$store.dispatch('queryUserIncomeDetailsInfo', this.$route.query.id).then(resp=>{
        if(resp.code === 200){
          this.currentIncomeInfo = resp.data;
        }
      })
    },
    showVoucherImage(url){
      window.open(url)
    }
  }
}
</script>

<style scoped>
#container {
  margin: 20px 20px;
  padding-right: 20px;
}

.demo-form-inline {
  text-align: center;
}
</style>
